<template>
	<view>
		<view class="udialog" v-if="ishowMPhoneDialog">
			<view class="udialog-bg"></view>
			<view class="udialog-in bingingnum">
				<view class="text">未绑定手机号</view>
				<view class="tips"><text class="itext">根据互联网相关法律法规，</text><text class="itext">您需要绑定手机号才能登录！</text>
				</view>
				<view class="btnwrap">
					<button @click="clickToCloseMPhoneDialog" class="item btn1cancel">取消</button>
					<button open-type="getPhoneNumber" @getphonenumber="doBPhone" class="item ok">确定</button>
				</view>
			</view>
		</view>

		<view class="udialog" v-if="ishowRPhoneDialog">
			<view class="udialog-bg"></view>

			<view class="udialog-in rphonein" v-if="!ishowRPhoneDialog_captcha">
				<view @click="clickToCloseRPhoneDialog" class="rpclose"></view>

				<view class="rptitle">手机验证码登录</view>

				<input class="rpinput" type="digit" v-model="phone" :auto-focus="true" placeholder="请输入您的手机号"
					placeholder-style="color: #999;" />
				<button class="rpsubmit" :class="isPhone ? '' : 'disabeld'" :disabled="!isPhone"
					@click="clickToRPhoneNext">点击获取验证码</button>
			</view>

			<view class="udialog-in rphonein" v-if="ishowRPhoneDialog_captcha">
				<view @click="clickToCloseRPhoneDialog" class="rpclose"></view>

				<view class="rptitle">请输入短信验证码</view>

				<view class="rpinputcaptcha-wrap">
					<!-- #ifndef MP-TOUTIAO -->
					<input class="rpinputcaptcha"  type="digit" v-model="smscaptcha" :auto-focus="true"
						:maxlength="smscaptchaMaxSize" />
					<!-- #endif -->
					
					<!-- #ifdef MP-TOUTIAO -->
					<input class="rpinputcaptcha" style="padding-top: 80rpx;color: #fff;padding-left: 1000px;" type="digit" v-model="smscaptcha" :auto-focus="true"
						:maxlength="smscaptchaMaxSize" />
					<!-- #endif -->

					<view class="rpinputcaptcha-numbers">
						<view v-for="(aitem,aindex) in captchaNums" :key="aindex" class="rpinputcaptcha-numbers-item">
							{{aitem}}
						</view>
					</view>
				</view>
				<button class="rpsubmit" :class="isSmscaptcha ? '' : 'disabeld'" :disabled="!isSmscaptcha"
					@click="clickToRPhoneSubmit">确定</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		computed: {
			isPhone() {
				let phone = this.phone;
				if (!phone) return false;
				if (phone.trim() == '') return false;
				if (!/^1\d{10}$/.test(phone)) return false;

				return true;
			},

			isSmscaptcha() {
				let code = this.smscaptcha;
				if (!code) return false;
				if (code.length == this.smscaptchaMaxSize) return true;
				return false;
			},

			captchaNums() {
				let re = [];

				for (let i = 0; i < this.smscaptchaMaxSize; i++) {
					re.push('');
				}

				let smscaptcha = this.smscaptcha + '';

				let i = 0;
				while (smscaptcha) {
					re[i++] = smscaptcha.substr(0, 1);
					smscaptcha = smscaptcha.substr(1);
				}

				return re;
			},
		},
		data() {
			return {
				//手机号绑定页面
				ishowMPhoneDialog: false,

				//使用手机验证码登录
				ishowRPhoneDialog: false,

				//使用手机号验证码验证
				ishowRPhoneDialog_captcha: false,

				//验证码
				smscaptcha: '',
				smscaptchaMaxSize: 5,

				phone: null,

				user: null,
			}
		},

		created() {
			this.fetch();
		},

		watch: {
			smscaptcha(val) {
				if (val.length == this.smscaptchaMaxSize) this.clickToRPhoneSubmit();
			},
		},
		methods: {
			fetch() {
				
			},

			//登录成功
			succ(skey) {
				let that = this;

				//登录成功
				let opost = {};
				opost.appid = that.$appid;
				opost.onlinekey = skey;

				//请求登录详细信息
				that.$online.fetch(online => {
					that.$loading.hide();

					//无效的skey
					if (!online || !online.uid) return that.$tip.show('网络错误，请重试', 'fail');

					//成功
					that.$online.setOnlineKey(skey);

					that.ishowMPhoneDialog = false;
					this.ishowRPhoneDialog = false;
					this.ishowRPhoneDialog_captcha = false;

					that.$emit('succ', online);

				}, opost);
			},

			doLogin() {
				// #ifdef MP-WEIXIN
				this.getBCode();
				this.doLoginMPWEIXIN();
				return;
				// #endif

				this.ishowRPhoneDialog = true;
			},

			doLoginMPWEIXIN() {
				if (this.user) {
					this.ishowMPhoneDialog = true;
					return;
				}

				let skey = this.$minipg.getSkey();
				if (skey) {
					this.skey = this.$minipg.getSkey();
					this.ishowMPhoneDialog = true;
					return;
				}

				//获取用户基本信息，用于注册
				this.$minipg.getUserProfile({
					succ: user => {
						this.user = user;
						this.ishowMPhoneDialog = true;
					},
					fail: (code, msg) => {
						this.$tip.show(msg, 'warn');
					},
				});

				return;
			},

	
			//使用手机号登录
			clickToRPhoneNext() {
				if (!this.isPhone) return false;
				if (this._xing) return;

				let post = {};
				post.phone = this.phone;

				this._xing = true;
				this.$iapi.v5iapi('account/smscaptcha', post, {
					succ: js => {
						this.ishowRPhoneDialog_captcha = true;
					},
					ever: js => {
						this._xing = false;
					},
				});
			},

			clickToRPhoneSubmit() {
				if (this._xing) return;
				if (!this.isSmscaptcha) return;
				if (!this.isPhone) return;

				let post = {};
				post.phone = this.phone;
				post.smscaptcha = this.smscaptcha;

				this.$loading.show('登录中');
				this._xing = true;
				this.$iapi.v5iapi('account/smslogin', post, {
					succ: js => {
						this.succ(js.skey);
					},
					fail: (code, msg) => {
						this.$tip.alert(msg, 'fail');
						this.$loading.hide();
					},
					ever: js => {
						this._xing = false;
						this.$loading.hide();
					},
				});
			},
			getBCode(){
				uni.login({
					provider: 'weixin',
					success: res => {
						this.BCode = res.code;
					},
					fail: error => {
						this.$tip.alert('系统错误，请重试', 'fail');
					},
				});
			},
			doBPhone(e) {
				if (this._xing || !this.BCode) return;

				if (!this.user && !this.skey) {
					this.ishowMPhoneDialog = false;
					return;
				}

				if (!e || !e.type || e.type != 'getphonenumber') {
					this.$tip.show('系统错误，请重试', 'fail');
					return;
				}

				if (!e.detail || !e.detail.encryptedData) {
					this.$tip.show('您拒绝操作了', 'fail');
					return;
				}

				let post = {};
				if (this.skey) post.onlinekey = this.skey;

				post.encrypteddata = e.detail.encryptedData;
				post.iv = e.detail.iv;
				post.stag = this.$appstag;

				this.user && Object.keys(this.user).map(it => {
					let _val = this.user[it];
					if ((typeof _val).toLocaleLowerCase() != 'string') return;

					post[it] = _val;
				});
				
				post.code = this.BCode;
				
				this.$loading.show('请稍后');
				this._xing = true;
				this.$iapi.v5iapi('account/wxxcxreg', post, {
					succ: js => {
						this.succ(js.skey);
					},
					fail: (code, msg) => {
						this.$tip.alert(msg, 'fail');
						this.$loading.hide();
					},
					ever: js => {
						this._xing = false;
					},
				});
				/*
				uni.login({
					provider: 'weixin',
					success: res => {
						post.code = res.code;

						this.$loading.show('请稍后');
						this._xing = true;
						this.$iapi.v5iapi('account/wxxcxreg', post, {
							succ: js => {
								this.succ(js.skey);
							},
							fail: (code, msg) => {
								this.$tip.alert(msg, 'fail');
								this.$loading.hide();
							},
							ever: js => {
								this._xing = false;
							},
						});
					},
					fail: error => {
						this._xing = false;
						this.$tip.alert('系统错误，请重试', 'fail');
					},
				});
				*/
			},
			
			clickToCloseMPhoneDialog() {
				this.ishowMPhoneDialog = false;
			},

			clickToCloseRPhoneDialog() {
				this.ishowRPhoneDialog = false;
				this.ishowRPhoneDialog_captcha = false;
			},

			//通过微信信息注册（不绑定手机号）
			doUserInfoLogin() {
				if (this.user) {
					this.postUserInfoLogin();
					return;
				}

				//获取用户基本信息，用于注册
				this.$minipg.getUserProfile({
					succ: user => {
						this.user = user;
						this.postUserInfoLogin();
					},
					fail: (code, msg) => {
						this.$tip.show(msg, 'warn');
					},
				});
			},

			postUserInfoLogin() {
				if (this._xing) return;

				let post = {};
				this.user && Object.keys(this.user).map(it => {
					let _val = this.user[it];
					if ((typeof _val).toLocaleLowerCase() != 'string') return;

					post[it] = _val;
				});

				uni.login({
					provider: 'weixin',
					success: res => {
						post.code = res.code;

						this.$loading.show('登录中');
						this._xing = true;
						this.$iapi.v5iapi('account/xcxuserupdate', post, {
							succ: js => {
								this.succ(js.skey);
							},
							fail: (code, msg) => {
								this.$tip.alert(msg, 'fail');
								this.$loading.hide();
							},
							ever: js => {
								this._xing = false;
							},
						});
					},
					fail: error => {
						this._xing = false;
						this.$tip.alert('系统错误，请重试', 'fail');
					},
				});
			},
			
			//通过百度手机登录
			doPhoneLoginBaidu(e){
				if (this._xing) return;
				
				if(!e.detail.encryptedData){
					return this.$tip.alert('请重新授权');
				}
				 
				let that = this ;
				let post = {} ;
				post.encrypteddata = e.detail.encryptedData ;
				post.iv = e.detail.iv ;
				post.stag = this.$appstag ;
				uni.getProvider({
					service: 'oauth',
					success: function (res) {
						if (~res.provider.indexOf('baidu')) {
							swan.getLoginCode({
								success: function (loginRes) {
									post.code = loginRes.code ;
									that._xing = true ; 
									that.$iapi.v5iapi('baiduapp/xcxbphone', post, {
										succ: js => {
											that.succ(js.skey);
										},
										fail: (code, msg) => {
											that.$tip.alert(msg, 'fail');
											that.$loading.hide();
										},
										ever: js => {
											that._xing = false;
											that.$loading.hide();
										},
									});
								}
							});
						}
					}
				});
			},
		},
	}
</script>

<style>
	.bingingnum {
		display: block;
		width: 544rpx;
		height: auto;
		padding: 234rpx 0 0;
		border-radius: 14rpx;
		background: #fff url(https://u-static.lmjx.net/2020/xcxjyh/images/login/bindbg.png) top center no-repeat;
		background-size: 100% auto;
	}

	.bingingnum .text {
		display: block;
		font-size: 30rpx;
		line-height: 40rpx;
		text-align: center;
		color: #2d2d2d;
	}

	.bingingnum .tips {
		display: block;
		margin-top: 22rpx;
		font-size: 26rpx;
		line-height: 42rpx;
		text-align: center;
		color: #717171;
	}

	.bingingnum .tips .itext {
		display: block;
	}

	.bingingnum .btnwrap {
		display: flex;
		margin-top: 36rpx;
		padding: 18rpx 0;
		border-top: 2rpx solid #e6e6e6;
	}

	.bingingnum .btnwrap .item {
		display: block;
		flex: 1;
		font-size: 30rpx;
		line-height: 62rpx;
		text-align: center;
		background: none;
		border: 0;
	}

	.bingingnum .btnwrap .item::after {
		border: none;
	}

	.bingingnum .btnwrap .btn1cancel {
		color: #b9b9b9;
	}

	.bingingnum .btnwrap .ok {
		color: #f06212;
		border-left: 2rpx solid #e6e6e6;
	}


	.rphonein {
		position: relative;
		height: auto;
		border-radius: 12rpx;
	}

	.rphonein .rpclose {
		display: block;
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		top: 20rpx;
		right: 20rpx;
		font-size: 0;
		background: url(https://u-static.lmjx.net/2021/xcxlmjx/images/idel.png) center center no-repeat;
		background-size: 100% auto;
	}

	.rphonein .rptitle {
		display: block;
		font-size: 36rpx;
		line-height: 44rpx;
		text-align: center;
		color: #1c1c1c;
	}

	.rphonein .rptips {
		display: block;
		margin-top: 10rpx;
		font-size: 20rpx;
		line-height: 32rpx;
		text-align: center;
		color: #c5c5c5;
	}

	.rphonein .rpinput {
		display: block;
		height: 78rpx;
		margin: 50rpx 0 0;
		padding: 0 20rpx 0 60rpx;
		border-bottom: 1px solid #ebebeb;
		background: url(https://u-static.lmjx.net/2021/xcxlmjx/images/phoneicon.png) left center no-repeat;
		background-size: auto 40rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.rphonein .rpinputcaptcha {
		background: none;
		padding-left: 20rpx;
		border-bottom: 2rpx dashed #eee;
	}

	.rpinputcaptcha-wrap {
		position: relative;
		height: 80rpx;
		margin-top: 50rpx;
	}

	.rpinputcaptcha-wrap .rpinputcaptcha {
		position: absolute;
		z-index: 3;
		opacity: 0;
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		margin: 0;
	}

	.rpinputcaptcha-wrap .rpinputcaptcha-numbers {
		display: flex;
		flex-direction: row;
		position: absolute;
		z-index: 2;
		height: 80rpx;
	}

	.rpinputcaptcha-wrap .rpinputcaptcha-numbers-item {
		border: 2rpx solid #eee;
		height: 80rpx;
		line-height: 80rpx;
		width: 80rpx;
		flex: 1;
		margin: 0 10rpx;
		text-align: center;
		color: #333;
		font-size: 32rpx;
		font-weight: bold;
	}

	.rphonein .rpsubmit {
		display: block;
		width: 393rpx;
		height: 80rpx;
		margin: 65rpx auto 0;
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		background: url(https://u-static.lmjx.net/2021/xcxlmjx/images/rpsubmit.png) center center no-repeat;
		background-size: 100% auto;
		border: 0;
		border-radius: 80rpx;
	}

	.rphonein .rpsubmit.disabeld {
		color: #c5c5c5;
		background: #ebebeb;
	}

	.rphonein .rpsubmit::after {
		display: none;
	}
</style>
